<!--
 * @file 带斑马纹表格
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2021/12/03
-->
<template>
  <a-table
    class="ant-table-striped"
    :row-class-name="rowClassName"
    :bordered="bordered"
    size="middle"
    :row-key="rowKey"
    v-bind="$attrs"
  >
    <template #bodyCell="{ column, text, record }">
      <slot
        name="bodyCell"
        :column="column"
        :text="text"
        :record="record"
      ></slot>
    </template>
  </a-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ItsTable',
  props: {
    rowClassName: {
      type: Function,
      default: (record: any, index: number) => (index % 2 === 1 ? 'table-striped' : null),
    },
    rowKey: {
      type: [String, Number],
      default: (record: any) => record.id,
    },
    bordered: {
      type: Boolean,
      default: true,
    },
  },
})
</script>

<style scoped lang="less">
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}

.ant-table-striped :deep(.ant-table-tbody) > tr.ant-table-row:hover > td {
  background: @its-hover-bg-color;
}

.ant-table-striped :deep(.ant-table-thead) > tr > th {
  background-color: rgba(24, 144, 255, 0.1);
}
</style>
